
<template>
  <div>
    <el-row>
      <el-col :span="24" style="height: 80vh">
        <CesiumMap ref="cesiumMap" :tileSet="tileSet"></CesiumMap>
      </el-col>
    </el-row>
  </div>
</template>
    
  
<script>
import CesiumMap from "../cesiumMap/index.vue";
import { watch } from "vue";
let viewer = null;
export default {

  components: { CesiumMap },
  data() {
    return {
      tileSet: {

      }
    }
  },
  methods: {
    loadGltf: function () {

      //通过entity的方法添加gltf
      const position = Cesium.Cartesian3.fromDegrees(117.139272, 31.827303, 0);
      const heading = Cesium.Math.toRadians(135);
      const pitch = 0;
      const roll = 0;
      const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
      const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);
      const entity = viewer.entities.add({
        name: "",
        position: position,
        orientation: orientation,
        model: {
          uri: "../public/models/CesiumDrone/CesiumDrone.glb",
          minimumPixelSize: 128,
          maximumScale: 20000
        }
      });



      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(117.139272, 31.827303, 1000.0),
        orientation: {
          heading: Cesium.Math.toRadians(-40),
          pitch: Cesium.Math.toRadians(-90),
          roll: Cesium.Math.toRadians(-20),
        },
      });


    }
  },
  setup() {
    return {
    };
  },

  mounted() {
    viewer = this.$refs.cesiumMap.viewer;
    viewer.imageryLayers.removeAll();
    this.$refs.cesiumMap.loadTianditu();

    this.loadGltf();
  },
};
</script>
  
<style scoped></style>
  